<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>写文章</title>
    <link th:href="@{/webjars/jquery.3.4.1/jquery.js}" rel="stylesheet">
    <link th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/person.css}" rel="stylesheet" />
    <link th:href="@{/bootstrap/css/bootstrap-theme.css}" rel="stylesheet"/>
    <link th:href="@{/editormd/css/editormd.css}" rel="stylesheet"/>
    <link th:href="@{/css/head.css}" rel="stylesheet" />
    <link th:href="@{/css/foot.css}" rel="stylesheet" />
    <link th:href="@{/webuploader/webuploader.css}" rel="stylesheet" />
    <script type="text/javascript" th:src="@{/webuploader/webuploader.js}"></script>
    <link href="//cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <!-- 加这个是解决选择图片按钮不可选的情况 ，其中百分之多少自己调吧-->
    <style>
        #filePicker div:nth-child(2){
            width:10%!important;height:100%!important;
        }
    </style>
</head>

<body>
    <!--引入导航栏-->
    <div th:include="/common/head :: top"></div>

    <!-- markdown编辑器 -->
    <div class="container"><br><br>
        <div class="row">
            <div class="col-lg-5">
                 <input id="userId" type="hidden" name = "userId"
                       th:value="${session.loginUser.userId}" /><br>
                 <label>博文分类：</label>
                 <select style="width: 60%;" id="articleCategory" name="articleCategory" class="form-control">
                    <a th:each="list : ${sortList}">
                        <!--name = "${list.sortName}"-->
                        <option th:value="${list.sortId}" th:text="${list.sortName}">
                        </option>
                     </a>
                </select>
                <div style="width: 60%;">
                    <label>文章标题：</label>
                    <input type="text" name="title" id="title" class="form-control"/>
                </div>
                <!--<input type="file" name="file" id="articlePhoto" enctype="multipart/form-data">-->
            </div>
            <div class="col-lg-12">
                <button style="float: right;" type="button" class="btn btn-outline-dark"
                        onclick="postArticle();">发布</button>
            </div>
        </div>
    </div>

    <!--文本标记区-->
    <div id="layout" style="width: 100%;height: 100%">
        <div id="test-editormd">
            <textarea style="display:none;" name="content" id="content"></textarea>
        </div>
    </div>


    <!--引入底部栏-->
    <div th:include="/common/foot :: foot"></div>
</body>
    <script th:src="@{/js/myJs/post.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/editormd/editormd.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <script th:src="@{/toastr/toastr.min.js}"></script>

    <script type="text/javascript">
        // 调用编辑器
        var testEditor;
        $(function() {
            testEditor = editormd("test-editormd", {
                width   : "1100px",
                height  : 640,
                syncScrolling : "single",
                path    : "../editormd/lib/"
            });
        });
    </script>


</html>